<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <script src="http://mat1.gtimg.com/libs/jquery2/2.2.0/jquery.js"></script>
    <script src="http://47.101.143.200:80/jquery.validate.js"></script>
    <style>
        .container{
            margin-top: 20px;
        }
        table tr th,td{
            text-align: center;
        }
        #btns{
            display:flex;
            justify-content: space-around;
        }
        .btn{
            background-color:rgb(224,209,202);
            color:white;
        }
        .btn-xs{
            margin-left:10px;
        }
        #fromWrap{
            border:1px solid #ccc;
            padding:20px;
            border-radius: 15px;
            background-color:white;
        }
        #fromWrap input{
            width:80%;
            display:inline-block;
            margin-right: 20px;
        }
        #fromWrap .blockLa{
            display: block;
        }
        #denSel{
            width:80%;
            display:inline-block;
        }
        .error{
            color:#d00;
        }
        #hiddenWrap{
            width: 0;
            height:0;
            overflow: hidden;
        }
        #fromWrapContainer{
            position: absolute;
            top:20px;
            left: auto;
            margin-top: 0;
        }
        #closeBtn{
            width:10px;
            height:10px;
            display: inline-block;
            margin-left: 800px;
            cursor: pointer;
        }
        .short{
            width:50px;
        }
        .long{
            width:180.67px;
        }
        #editTb input{
            text-align: center;
            color:#333;
            font-weight: 200;
            height:26px;
        }
        #editTb select{
            height:25px;
        }
        #edit form table{
            height:103px;
        }
        #editWrap{
            width: 0;
            height:0;
            overflow: hidden;
        }
        #editForm label.error{
            padding-top:5px;
            margin-bottom: 0;
            font-size:10px;
        }
        #editForm .ths{
            width:68.67px;
        }
        #editForm .ths2{
            width:204.67px;
        }
        #editForm #genTh{
            width:56.67px;
        }
        #editForm #caozuo{
            width:117.33px;
        }
        .chkTh{
            width:40.67px;
        }
        .shortTh{
            width:62.67px;
        }
        .longTh{
            width: 145px;
        }
        body{
            background-image: url(http://47.101.143.200:80/bg2.jpeg);
            background-position-x: 100%;
            background-repeat: no-repeat;
            background-size: 100%;
            height:550px;
        }
        #editContainer{
            position: absolute;
            left: 20%;
        }
        table{
            background-color:white;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="col-lg-2"></div>
        <div class="col-lg-8" id="btns">
            <button class="btn btn-md" id="addBtn">添加</button>
            <button class="btn btn-md" id="delBtn">删除</button>
            <button class="btn btn-md" id="fxBtn">反选</button>
            <button class="btn btn-md" id="cancel">取消</button>
        </div>
        <div class="col-lg-2"></div>
    </div>
    <div class="container" id="bgimg">
        <div class="col-lg-2"></div>
        <div class="col-lg-8">
            <table style="table-layout:fixed;" align="center" border="1" cellspacing="0" cellpadding="10" class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th class="chkTh">
                            <input type="checkbox" name="" id="allSel">
                        </th>
                        <th class="shortTh">编号</th>
                        <th class="shortTh">姓名</th>
                        <th class="shortTh">年龄</th>
                        <th class="shortTh">性别</th>
                        <th class="longTh">邮箱</th>
                        <th class="longTh">手机</th>
                        <th class="longTh">操作</th>
                    </tr>
                </thead>
                <tbody id="tb"></tbody>
            </table>
                <div id="editWrap">
                    <div id="edit">
                        <form id="editForm">
                                <table align="center" border="1" cellspacing="0" cellpadding="10" class="table table-striped table-hover">
                                <thead>
                                    <tr>
                                        <th class="ths">编号</th>
                                        <th class="ths">姓名</th>
                                        <th class="ths">年龄</th>
                                        <th id="genTh">性别</th>
                                        <th class="ths2">邮箱</th>
                                        <th class="ths2">手机</th>
                                        <th id="caozuo">操作</th>
                                    </tr>
                                </thead>
                                <tbody id="editTb">
                                    <tr>
                                        <th><input type="text" class="short id" disabled name="id"></th>
                                        <th><input type="text" class="short name" name="name"></th>
                                        <th><input type="text" class="short age" name="age"></th>
                                        <th>
                                            <select type="text" class="gender">
                                                <option selected>男</option>
                                                <option>女</option>
                                            </select>
                                        </th>
                                        <th><input type="text" class="long email" name="email"></th>
                                        <th><input type="text" class="long phone" name="phone"></th>
                                        <th>
                                            <button class="btn btn-xs" id="editSubmit">确定</button>
                                            <button class="btn btn-xs" id="editClose">关闭</button>
                                        </th>
                                    </tr>
                                </tbody>
                            </table>
                        </form>
                    </div>
                </div>
            </div>
        <div class="col-lg-2"></div>
    </div>
    <div class="container" id="fromWrapContainer">
        <div class="col-lg-2"></div>
        <div id="hiddenWrap">
            <div id="fromWrap">
                <div id="closeBtn" class="btn-default">×</div>
                <form id="addForm">
                    <div class="form-group">
                        <label class="blockLa">ID</label>
                        <input type="text" name="id" class="form-control messages" placeholder="请输入您的ID">
                    </div>
                    <div class="form-group">
                        <label class="blockLa">姓名</label>
                        <input type="text" name="name" class="form-control messages" placeholder="请输入您的姓名">
                    </div>
                    <div class="form-group">
                        <label class="blockLa">年龄</label>
                        <input type="text" name="age" class="form-control messages" placeholder="请输入您的年龄">
                    </div>
                    <div class="form-group">
                        <label class="blockLa">性别</label>
                        <select class="form-control" id="denSel" name="gender">
                            <option selected>男</option>
                            <option>女</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="blockLa">邮箱</label>
                        <input type="text" name="email" class="form-control messages" placeholder="请输入您的邮箱">
                    </div>
                    <div class="form-group">
                        <label class="blockLa">手机</label>
                        <input type="text" name="phone" class="form-control messages" placeholder="请输入您的手机号">
                    </div>
                    <button type="submit" class="btn btn-md" id="subBtn">提交</button>
                </form>
            </div>
        </div>
        <div class="col-lg-1"></div>
    </div>
</body>
<script>
    //数据数组
    var data=[
        {
            id:1,
            name:'yu',
            age:18,
            gender:'女',
            email:'yu@qq.com',
            phone:13728338477
        },{
            id:2,
            name:'wei',
            age:19,
            gender:'男',
            email:'wei@qq.com',
            phone:17827737363
        },
    ];

    //添加数据函数
    var addData=function(){
        $('#tb').empty();
        $.each(data,function(index1,value1){//遍历data数组
            var tr=$('<tr>'),//创建tr
            btn1=$('<button>').html('删除').addClass('btn btn-xs del').attr('ids',value1.id),
            btn2=$('<button>').html('编辑').addClass('btn btn-xs edit').attr('ids',value1.id),//创建两个btn
            btnTd=$('<td>').append([btn1,btn2]);//创建按钮td
            tr.append($('<td>').append($('<input>').attr('type','checkbox').attr('idt',value1.id)));//在遍历data对象前插入checkbox
            $.each(data[index1],function(index,value2){//遍历data数组元素（数据对象）
                var td=$('<td>').html(String(value2));//循环创建td并插入value（这里的value就是数据值）
                tr.append(td);//将td插入tr
            })
            tr.append(btnTd);//tr中插入按钮td
            $('#tb').append(tr);//在tbody中插入tr
        })
    }
    addData();

    //自定义电话号码验证
    $.validator.addMethod("mobile", function(value, element) {
        var mobile =  /^1[357]\d{9}$/;
        return mobile.test(value);
             }, "手机号码格式错误");  
    //用validate验证表单
    $('#addForm').validate({
        rules:{
            id:{
                required:true,
                number:true
            },
            name:{
                required:true,
                rangelength:[2,10],
            },
            age:{
                required:true,
                digits:true,
                range:[10,99]
            },
            email:{
                required:true,
                email:true
            },
            phone:{
                required:true,
                minlength:11,
                maxlength:11,
                mobile:true
            }
        },
        messages:{
            id:{
                required:'请填写ID',
                number:'请填入数字',
            },
            name:{
                required:'请填写姓名',
                rangelength:'长度在2~10之间'
            },
            age:{
                required:'请填写年龄',
                digits:'请填入正整数',
                range:'10~99'
            },
            email:{
                required:'请填写email地址',
                email:'请填写正确的邮箱地址'
            },
            phone:{
                required:'请填写手机号',
                minlength:'11位手机号',
                maxlength:'11位手机号',
            }
        },
        submitHandler:function(){
            var obj={};//创建一个空对象
            $.each($('#addForm .form-control'),function(index,value){
                obj[value.name]=value.value;
            })
            data.push(obj);
            addData();
            $('#addForm')[0].reset();
            // $(this).submit();
            hiddenForm();
        }
    })

    //editForm验证
     //用validate验证表单
     $('#editForm').validate({
        rules:{
            id:{
                required:true,
                number:true
            },
            name:{
                required:true,
                rangelength:[2,10],
            },
            age:{
                required:true,
                digits:true,
                range:[10,99]
            },
            email:{
                required:true,
                email:true
            },
            phone:{
                required:true,
                minlength:11,
                maxlength:11,
                mobile:true
            }
        },
        messages:{
            id:{
                required:'请填写ID',
                number:'请填入数字',
            },
            name:{
                required:'请填写姓名',
                rangelength:'长度在2~10之间'
            },
            age:{
                required:'请填写年龄',
                digits:'请填入正整数',
                range:'10~99'
            },
            email:{
                required:'请填写email地址',
                email:'请填写正确的邮箱地址'
            },
            phone:{
                required:'请填写手机号',
                minlength:'11位手机号',
                maxlength:'11位手机号',
            }
        },
        submitHandler:function(){
            var editId=$('.id').val();
            data.filter(function(item,index){
                if(item.id==editId){
                    $.each(item,function(index1,value){
                        data[index][index1]=document.getElementsByClassName(index1)[0].value;
                        addData();
                        hiddenEdit();
                    })
                }
            })
        }
    })

    //封装form出现和消失函数
    var showForm=function(){
        $('#hiddenWrap').animate({
            width:'855px',
            height:'540px'
        },300,function(){})
    }
    var hiddenForm=function(){
        $('#hiddenWrap').animate({
            width:'0px',
            height:'0px',
        },300,function(){})
    }
    //添加按钮绑定事件
    $('#addBtn').click(showForm);
    //关闭按钮
    $('#closeBtn').click(function(){
        hiddenForm();
        $('#addForm')[0].reset();
        $('label').filter('.error').css(
            {
                display:'none'
            }
        );
    })

    //事件委托给table删除&编辑事件
    $('table').on('click','.del',function(){
        if(!confirm('确认删除吗？')){
            return;
        }
        var id=$(this).attr('ids');//用原生的不行
        data.filter(function(item,index){
            if(item.id==id){
                data.splice(index,1);
                addData();
            }
        })
    })
    //封装编辑栏出现&消失
    var showEdit=function(){
        $('#editWrap').animate({
            width:'790px',
            height:'105px'
        },300,function(){})
    };
    var hiddenEdit=function(){
        $('#editWrap').animate({
            width:'0px',
            height:'0px',
        },300,function(){})
    };
    //editClose按钮绑定事件
    $('#editClose').click(function(){ 
        $("#editWrap").stop(true);//清除元素的所有动画
        hiddenEdit();
    });
    //编辑
    $('table').on('click','.edit',function(){
        $("#editWrap").stop(true);
        $('#editWrap label').prop('style','display:none');
        //编辑栏出现
        showEdit();
        var id=$(this).attr('ids');//用原生的不行
        data.filter(function(item,index){
            if(item.id==id){
                $.each(item,function(index1,value){
                    document.getElementsByClassName(index1)[0].value=value;
                })
            }
        })
    })

    //删除所选按钮绑定事件
    $('#delBtn').click(function(){
        var count=0;
        $.each($('#tb input'),function(index,el){
            if(this.checked){
                count++;
            }
        })
        if(count>=1){
            if(!confirm('确认删除吗？')){
                return;
            }
        }else{
            return;
        }
        $('#tb input').filter(function(index,el){
            if(el.checked){
                var id2=$(this).attr('idt');//用原生的不行
                data.filter(function(item,index){
                    if(item.id==id2){
                        data.splice(index,1);
                    }
                })
            }
            addData();
        })
        $('#allSel').prop('checked',false);
    })
    //全选checkbox
    $('#allSel').click(function(){
        $('#tb input').prop("checked",$('#allSel').prop('checked'));
        if(this.checked){
            $('#tb [type="checkbox"]').parent().parent().css('backgroundColor','rgb(242,237,234)');
        }else{
            $('#tb [type="checkbox"]').parent().parent().css('backgroundColor','');
        }
    })
    //为反选按钮绑定事件
    $('#fxBtn').click(function(){
        $('#tb [type="checkbox"]').prop('checked',function(index,value){
            this.checked=!value;
        })
    })

    //为取消按钮绑定事件
    $('#cancel').click(function(){
        $('#tb input').prop("checked",false);
        $('#allSel').prop("checked",false);
    })

    //为所有checkbox绑定事件
    $('#tb').on('change','[type="checkbox"]',function(){
        if(this.checked){
            $(this.parentNode.parentNode).css('backgroundColor','rgb(242,237,234)');
        }else{
            $(this.parentNode.parentNode).css('backgroundColor','');
        }
    })
</script>
</html>